<template>
  <div class="fixed inset-0 bg-black/60 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-[600px] shadow-xl max-h-[80vh] overflow-hidden">
      <div class="p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-medium">我的收藏</h3>
          <button @click="$emit('close')" class="text-gray-400 hover:text-gray-600">
            <i class="ri-close-line text-xl"></i>
          </button>
        </div>
        
        <div class="max-h-[400px] overflow-y-auto">
          <div v-if="favoriteJobs.length === 0" class="text-gray-400 text-center py-8">
            暂无收藏的职位
          </div>
          
          <div v-else class="space-y-4">
            <div 
              v-for="job in favoriteJobs"
              :key="job.id"
              class="border border-gray-200 rounded-lg p-4 hover:border-blue-500 cursor-pointer"
            >
              <div class="flex justify-between items-start mb-3">
                <div>
                  <div class="flex items-center mb-2">
                    <span v-if="job.urgent" class="bg-orange-100 text-orange-500 text-xs px-2 py-0.5 rounded mr-2">急聘</span>
                    <h3 class="font-medium text-lg">{{ job.title }}</h3>
                  </div>
                  <div class="text-blue-600 font-medium">{{ job.salary }}</div>
                </div>
                <button 
                  @click="removeFavorite(job.id)"
                  class="text-gray-400 hover:text-red-500"
                >
                  <i class="ri-delete-bin-line"></i>
                </button>
              </div>
              
              <div class="flex items-center text-sm text-gray-500 mb-3 space-x-3">
                <span>{{ job.experience }}</span>
                <span>{{ job.education }}</span>
                <span>{{ job.type }}</span>
              </div>
              
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <div class="w-8 h-8 bg-gray-100 rounded flex items-center justify-center mr-2">
                    <i class="ri-building-line text-gray-500"></i>
                  </div>
                  <span class="text-sm">{{ job.company }}</span>
                </div>
                <div class="text-xs text-gray-400">{{ job.location }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Job } from '../types'

const emit = defineEmits<{
  close: []
}>()

// Mock favorite jobs data
const favoriteJobs = ref<Job[]>([
  {
    id: 'fav-1',
    title: '高级产品经理',
    company: '智慧科技',
    location: '上海 浦东新区',
    salary: '35-50K·13薪',
    experience: '5-8年',
    education: '本科',
    type: '全职',
    description: '',
    requirements: '',
    benefits: [],
    status: 'active',
    views: 0,
    communications: 0,
    interested: 0,
    createdAt: '',
    expiresAt: '',
    urgent: true
  }
])

const removeFavorite = (jobId: string) => {
  const index = favoriteJobs.value.findIndex(job => job.id === jobId)
  if (index !== -1) {
    favoriteJobs.value.splice(index, 1)
  }
}
</script>
